<template>
    <div style="display: block; flex-direction: column;">
      <el-row :gutter="20">
        <el-col :span="19" >
          <Banner/>
        </el-col>
        <el-col :span="5" >
          <Panel style="min-height:300px">
            <div v-if="!isAuthenticated" class="home_profile">
              <div style="font-size: 16px; color: darkslategray;">MOOC模式课程</div>
              <el-avatar style="margin-top:50px" :size="80" src="https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png"></el-avatar>
              <el-button class="home_bt" round type="success" @click="handleBtnClick('login')">
                登录/注册
              </el-button>
            </div>
            <div  v-if="isAuthenticated" class="home_profile">
              <el-avatar style="margin-top:20px" :size="80" :src="this.avatar"></el-avatar>
              <div style="margin-top:20px;font-size: 20px;font-weight: 600;">{{user.username}}</div>
              <div style="margin:20px 0;font-size: 18px;font-weight: 400;">奖学金 {{user.scholarship}}</div>
              <div style="font-size: 14px; color: cornflowerblue;cursor: pointer;" @click="goCourseDetail(item.id)" v-for="item in myCourseName">
                <p style="font-size:16px">{{item.name}}</p>
              </div>
              <el-button @click="goCourse" class="home_bt" round type="success">
                我的课程
              </el-button>
            </div>
          </Panel>
        </el-col>
      </el-row>
      <Course ref="Course" @getfinish="makecourse" >

      </Course>
      
    </div>
  </template>
  
<script>
  import Banner from './Banner.vue'
  import Course from '../course/Course.vue'
  import { mapGetters, mapActions } from 'vuex'
  import { USER_TYPE } from '@/utils/constants'
  import login from '@oj/views/user/Login'
  import register from '@oj/views/user/Register'
  export default {
    name: 'fistpage',
    data () {
      return {
        myCourseName: []
      }
    },
    components: {
      Banner,
      Course,
      login,
      register
    },
    mounted () {
      this.init()
    },
    methods: {
      init () {

      },
      makecourse () {
        let ct = this.$refs.Course.course_list
        ct.forEach(element => {
          console.log(element.id)
          if (element.pay) {
            this.myCourseName.push({
              id: element.id,
              name: element.name
            })
          }
        })
      },
      goCourse () {
        let ct = this.$refs.Course.course_list
        console.log('ccccccccccc', ct)
        this.$router.push({name: 'myorder', query: {}})
      },
      goCourseDetail (id) {
        this.$router.push({name: 'course-detail', params: {course_id: id}})
      },
      ...mapActions(['getProfile', 'changeModalStatus']),
      handleBtnClick (mode) {
        this.changeModalStatus({
          visible: true,
          mode: mode
        })
      }
    },
    computed: {
      ...mapGetters(['user', 'theme', 'isAuthenticated', 'avatar']),
      isAdmin () {
        return this.user.admin_type === USER_TYPE.SUPER_ADMIN
      }
    }
  }
</script>
  
<style lang="less" scoped>
  .content-app {
    width:100%;
  }
  .home_profile {
    display: flex;
    flex-direction: column;
    // justify-content: space-evenly;
    align-items: center;
  }
  .home_bt {
    padding: 10px 50px;
    margin:50px 0;
    font-size: 18px;
    background-color: #00cc7e;

  }
</style>